import { useState,useEffect } from "react";
import { Radio } from "antd";
import { getFlows } from "../../tools/ajax";
import "./fen.css";
let obj = null
let objs = null
function Fenliu() {
    const [get, setGet] = useState(0)
    let [link, setLink] = useState([])
    const [value, setValue] = useState('5G');
    const [dataList, setDataList] = useState({})
    const onChange = (e) => {
        console.log('radio checked', e.target.value);
        setDataList(objs[e.target.value])

        setValue(e.target.value);
        console.log(dataList)
    };

    async function aa(){
        let res = await getFlows({})
        objs = res.data
        setDataList(objs["5G"])
        console.log(dataList);
    }
    useEffect(() => {
        aa()
    }, []);
  return (
    <div className="navs">
        <h3 className="hh1">吞吐量</h3>
        <hr />
      <div className="cai"><br />
        <Radio.Group name="radiogroup" onChange={onChange} defaultValue={value}>
          <Radio value={"5G"}>5G</Radio>
          <Radio value={"10G"}>10G</Radio>
          <Radio value={"50G"}>50G</Radio>
          <Radio value={"100G"}>100G</Radio>
        </Radio.Group>
      </div>
      <div className="sma">
      <small>软件费:{dataList.p1}</small>
      <small>硬件费：{dataList.p2}</small>
      <small>硬件费：{dataList.total}</small>
      </div>
      <div className="czw">
         <p className="ps">软件配置图</p>
        <img className="imgs" src={"http://localhost:5000/"+dataList.pic1} alt="" />
      </div>
      <div className="cf">
        <p className="px">软件配置图</p>
        <img className="cf1" src={"http://localhost:5000/"+dataList.pic2} alt="" />
      </div>
    </div>
  );
}
export default Fenliu;
